<!-- 充值订单详情页 -->
<template>
  <view class="bigbox">
    <view class="box1">
      <u-icon
        name="reload"
        size="40"
        @click="getOrderInfo"
        style="cursor: pointer"
      ></u-icon>
    </view>
    <view class="content">
      <view class="smallbox">
        <view class="bt">充值信息 </view>
        <view class="nr">
          <view class="txbox">
            <view>充值账号</view>
            <view>{{ orderInfo.contactNumber }}</view>
          </view>
          <view class="txbox">
            <view>产品名称</view>
            <view>{{
              orderInfo.orderProductSkus
                ? orderInfo.orderProductSkus[0].name
                : ''
            }}</view>
          </view>
          <view class="txbox">
            <view>商品价格</view>
            <view class="jgwz">￥{{ orderInfo.totalMoney }}</view>
          </view>
        </view>
      </view>
      <view class="smallbox">
        <view class="bt">优惠信息 </view>
        <view class="nr">
          <view class="txbox">
            <view> 复来券 </view>
            <view class="jgwz">- ￥{{ orderInfo.scoreMoney }}</view>
          </view>
          <view class="txbox" v-if="orderInfo.shopMode == 4">
            <view>服务费</view>
            <view class="jgwz">{{ orderInfo.otherMoney }}</view>
          </view>
          <!-- <view class="txbox">
            <view>订单金额</view>
            <view class="jgwz">￥{{(orderInfo.totalMoney - orderInfo.scoreMoney)+orderInfo.otherMoney}}</view>
          </view> -->
          <view class="txbox">
            <view>实付金额</view>
            <view class="jgwz"
              >￥{{ (orderInfo.totalMoney - orderInfo.scoreMoney).toFixed(2) }}</view
            >
          </view>
        </view>
      </view>
      <view class="smallbox">
        <view class="bt">订单信息 </view>
        <view class="nr">
          <view class="txbox">
            <view>订单编号</view>
            <view style="display: flex;align-items: center;">
              {{ orderInfo.orderNo }}
              <van-button
                plain
                hairline
                size="small"
                type="default"
                @click="handleCopy"
                style="margin-left: 5px;"
                >复制</van-button
              >
            </view>
          </view>
          <view class="txbox">
            <view>创建时间</view>
            <view>
              {{ formatTimestamp(orderInfo.createTime) }}
            </view>
          </view>
          <view class="txbox">
            <view>用户昵称</view>
            <view>{{ userInfo.nickname }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick, watch } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { formatTimestamp, dateFormat } from '@/utils/index'
import { enumAll, orderApi } from '@/api'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
const orderInfo = ref<any>({})
const orderId = ref<any>(0)
const isApp = ref(false)
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
// 页面加载时检查协议状态
onLoad(async (option: any) => {
  // console.log('订单接收option', option)
  orderId.value = option.orderId
  if (option?.from && option.from.toLowerCase() === 'app') {
    isApp.value = true
  }
  if (orderId.value) {
    getOrderInfo()
  }
})
//获取单个订单数据
const getOrderInfo = async () => {
  uni.showLoading({ title: '获取订单信息中，请稍后', mask: true })
  const nowTime = new Date() // 获取当前时间
  try {
    let tempObj = {
      detail: true,
      integralsRuleId: 9,
      orderNo: orderId.value
    }
    const { data } = await orderApi.orderList(tempObj).finally(() => {
      uni.hideLoading()
    })
    console.log('获取单个订单', data)
    orderInfo.value = data.records[0]
  } catch (e) {
    console.log('获取orderInfo错误', e)
  }
}
const handleCopy = () => {
  const orderNo = orderInfo.value.orderNo
  if (orderNo) {
    uni.setClipboardData({
      data: orderNo,
      success: () => {
        uni.showToast({ title: '复制成功' })
      },
      fail: () => {
        uni.showToast({ title: '复制失败', icon: 'none' })
      }
    })
  } else {
    uni.showToast({ title: '订单编号为空', icon: 'none' })
  }
}
// 处理付款文字
const handleFkwz = (zt: any) => {
  let str = ''
  switch (zt) {
    case 10:
      str = '待付款'
      break
    case 90:
    case 91:
      str = '应付款'
      break
    default:
      str = '实付款'
  }
  return str
}
</script>
<style lang="scss" scoped>
.bigbox {
  font-size: 24rpx;
  background: linear-gradient(
    to bottom,
    #f9dcb8 5%,
    #faead7 25%,
    #f8f8f8 85%,
    #f5f5f5 100%
  );
  min-height: 100vh;
  padding: 20rpx;
  .box1 {
      padding: 20rpx;
      text-align: right;
    }
  .content {
    background-color: #fff;
    border-radius: 10rpx;
    
    .smallbox {
      padding: 20rpx;
      // border-bottom: 1rpx solid #dbdbdb;
      > view {
        margin-bottom: 20rpx;
      }
      .bt {
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
.txbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > view {
    margin-bottom: 20rpx;
  }
}
.jgwz {
  color: red;
  font-weight: bold;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
</style>
